<template>
  <div class="contain">
    <div class="contain-header">
      <h3>当前记录状态 : </h3>
      <h3 class="title">{{ obj.status === 2 ? '待接诊' : obj.status === 3 ? '问诊中' : '已诊断' }} <i
          class="el-icon-check" style="font-weight: bold"></i></h3>
      <el-button type="primary" size="mini" @click="back">返 回</el-button>
    </div>
    <div class="contain-body">
      <div class="body-show">
        <div class="show-title">患者资料</div>
        <el-tabs v-model="activeName">
          <el-tab-pane label="临床表现" name="1"></el-tab-pane>
          <el-tab-pane label="体温检测" name="2"></el-tab-pane>
          <el-tab-pane label="化验检查" name="3"></el-tab-pane>
          <el-tab-pane label="用药" name="4"></el-tab-pane>
        </el-tabs>
        <div class="show-body" v-show="activeName === '1'">
          <clinical :info="obj"></clinical>
        </div>
        <div class="show-body" v-show="activeName === '2'">
          <temperature :info="obj"></temperature>
        </div>
        <div class="show-body" v-show="activeName === '3'">
          <test :info="obj"></test>
        </div>
        <div class="show-body" v-show="activeName === '4'">
          <drug :info="obj"></drug>
        </div>
      </div>
      <div class="body-show">
        <div class="show-title">医生诊断结果</div>

        <div class="show-textarea" style="color: #0c4070;">
          <div class="textarea-title">疾病名称</div>
          <div class="textarea-input">
            <el-select placeholder="" size="small" v-model="diagnosticResult.illnessTypeName">
              <el-option :label="item.name" :value="item.name" v-for="item in illnessTypeList"
                         :key="item.name"></el-option>
            </el-select>
          </div>
        </div>

        <div class="show-textarea" style="color: #0c4070;">
          <div class="textarea-title">诊断结果及治疗方案</div>
          <div class="textarea-input">
            <el-input
                type="textarea"
                :rows="5"
                v-model="diagnosticResult.diagnosisAndTreatment"
                placeholder=""
            >
            </el-input>
          </div>
        </div>

        <div class="show-textarea">
          <div class="textarea-title">建议用药</div>
          <div class="textarea-other">
            <el-form ref="form" label-width="80px" size="mini" inline
                     v-for="(item,index) in diagnosticResult.diagnosticResultMedicalArr" :key="index">
              <el-form-item label="药名">
                <el-input style="width: 200px" placeholder="" v-model="item.name"></el-input>
              </el-form-item>
              <el-form-item label="用药途径">
                <el-select placeholder="" v-model="item.useWay" style="width: 200px">
                  <el-option label="口服" :value="1" :key="1"></el-option>
                  <el-option label="静滴" :value="2" :key="2"></el-option>
                  <el-option label="静推" :value="3" :key="3"></el-option>
                </el-select>
                <!--                <el-input style="width: 200px" placeholder=""></el-input>-->
              </el-form-item>
              <el-form-item label="用药时间">
                <el-input style="width: 200px" placeholder="" v-model="item.time"></el-input>
              </el-form-item>
              <el-form-item label="用药量">
                <el-input style="width: 200px" placeholder="" v-model="item.num"></el-input>
              </el-form-item>
            </el-form>
          </div>

        </div>
        <div class="show-textarea">
          <div class="textarea-title">观察意外事项</div>
          <div class="textarea-input">
            <el-input
                type="textarea"
                :rows="5"
                v-model="diagnosticResult.observeContingencies"
                placeholder=""
            >
            </el-input>

          </div>
        </div>
        <div class="show-textarea">
          <div class="textarea-title">意外状况处理意见</div>
          <div class="textarea-input">
            <el-input
                type="textarea"
                v-model="diagnosticResult.contingencyHandlingAdvice"
                :rows="5"
                placeholder=""
            >
            </el-input>

          </div>
        </div>
        <div class="show-textarea" style="justify-content: center" v-if="obj.status===3">
          <el-button :disabled="userInfo.role===3" type="primary" @click="diagnosis">保 存</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import clinical from '../components/clinical'
import temperature from '../components/temperature'
import test from '../components/test'
import drug from '../components/drug'
import illnessType from "@/page/illnessType.vue";

export default {
  computed: {
    illnessType() {
      return illnessType
    }
  },
  components: {
    clinical,
    temperature,
    test,
    drug
  },
  data() {
    return {
      illnessTypeList: [],
      activeName: '1',
      id: null,
      obj: {},
      diagnosticResult: {
        interrogationRecordsId: null,
        diagnosisAndTreatment: null,
        diagnosticResultMedicalArr: [],
        observeContingencies: null,
        contingencyHandlingAdvice: null,
        illnessTypeName: null
      },
      diagnosticResult2: {
        interrogationRecordsId: null,
        diagnosisAndTreatment: null,
        diagnosticResultMedicalArr: [],
        observeContingencies: null,
        contingencyHandlingAdvice: null,
        illnessTypeName: null
      },
      userInfo: {}
    }
  },
  created() {
    this.id = this.$route.query.id
    this.findById(this.id)
    this.findAllIllnessTypeList()
    this.userInfo = JSON.parse(sessionStorage.getItem('userInfo'))
  },
  methods: {
    findAllIllnessTypeList() {
      this.axios.post('/admin-illness-type/findAll').then(res => {
        if (res.data.code === 200) {
          this.illnessTypeList = res.data.data
        }
      })
    },
    diagnosis() {
      this.$confirm('确定提交诊断结果吗, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.diagnosticResult.interrogationRecordsId=this.id
        this.axios.post('/doctor-interrogationRecords/diagnosis', this.diagnosticResult).then(res => {
          if (res.data.code === 200) {
            this.back()
            this.$message.success(res.data.message)
          }
        })
      })

    },
    findById(id) {
      this.axios.post('/admin-interrogationRecords/findById?id=' + id).then(res => {
        if (res.data.code === 200) {
          this.obj = res.data.data
          this.diagnosticResult = this.obj.diagnosticResult
          if (!this.diagnosticResult) {
            this.diagnosticResult = this.diagnosticResult2
          }
          if (this.diagnosticResult.diagnosticResultMedicalArr.length === 0) {
            let obj = {
              name: null,
              useWay: null,
              time: null,
              num: null
            }
            this.diagnosticResult.diagnosticResultMedicalArr.push(obj)
          }
        }
      })
    },
    back() {
      this.$router.replace('/consultationOrder')
    }
  },
}
</script>

<style scoped lang="less">
.contain {
  width: 100%;
  height: 100%;

  /deep/ .el-input.is-disabled .el-input__inner, .el-textarea.is-disabled textarea, .el-date-editor--daterange.is-disabled.el-range-editor {
    background-color: #ffffff !important;
    color: #0c4070;
  }

  .contain-header {
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;

    .title {
      margin: 0 20px;
      box-sizing: border-box;
      color: #1890ff;
    }
  }

  .contain-body {
    width: 100%;
    height: calc(100% - 100px);
    display: flex;
    align-items: center;
    justify-content: space-between;

    .body-show {
      width: 49.5%;
      height: 100%;
      overflow: auto;
      padding: 1%;
      box-sizing: border-box;
      background-color: #ffffff;

      .show-title {
        font-size: 16px;
        color: #666;
        margin-bottom: 20px;
        font-weight: bold;
      }

      .show-textarea {
        width: 100%;
        margin-bottom: 20px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .textarea-title {
          width: 10%;
          color: #666;
          text-align: center;
        }

        .textarea-input {
          width: 85%;

        }

        .textarea-other {
          width: 85%;
          border: 1px dashed #ccc;
          padding: 10px 10px 0 10px;
          box-sizing: border-box;
        }
      }

      .show-body {
        width: 100%;
      }
    }
  }
}
</style>
